<template>
    <div>
        <h2 style="text-align: center;">注册页面</h2>
        <table class="table-bordered" border="1">
            <tr>
                <td>登录名称:</td>
                <td>
                    <input type="text" v-model="info.Uname" placeholder="请输入登录名称" />
                </td>
            </tr>

            <tr>
                <td>登录密码:</td>
                <td>
                    <input type="password" v-model="info.Upwd" placeholder="请输入登录密码" />
                </td>
            </tr>

            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="button" value="注册" class="btn btn-success" @click="SaveData">
                </td>
            </tr>
        </table>
    </div>

</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';

//创建响应式数据
const info=ref({
    Uname:"",
    Upwd:""
})

//创建路由操作对象实例
const router=useRouter();

//声明注册方法
const SaveData=()=>{
    //验证用户名不能为空
    if(info.value.Uname=="")
    {
        alert('用户名不能为空');
        return;
    }

    if(info.value.Upwd=="")
    {
        alert('密码不能为空');
        return;
    }

    //验证密码必须包含数字、字母，6-10位
    var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
    if(!reg.test(info.value.Upwd))
    {
        alert('必须包含数字、字母，6-10位');
        return;
    }
    
    // axios({
    //     url:"https://localhost:44321/api/Users/UserRegister",
    //     method:"post",
    //     data: {
    //         UL_Name:info.value.Uname,
    //         UL_Pwd:info.value.Upwd
    //     },
    // })

    //方式二:通过Axios发送请求访问webAPI
    axios.post("https://localhost:44321/api/Users/UserRegister",
        {
            UL_Name:info.value.Uname,
            UL_Pwd:info.value.Upwd
        }
    )
    .then(res=>{
        if(res.data>0)
        {
            alert('用户注册成功');
            router.push('/Login')
        }
        else if(res.data==-1)
        {
            alert('用户名称已存在,请更换!')
        }
        else
        {
            alert('用户注册失败')
        }
    })
    .catch(error=>{
        console.log(error);
    })

}
</script>
